<template>
  <div class="layout" @mousedown="mousedown">
    <div class="left">
      <!-- 头部 -->
      <div class="header">
        <!-- LOGO -->
        <img src="@assets/images/logo.svg" />
        <h1>Salesline</h1>
      </div>
      <!-- 表单内容区域 -->
      <div class="content">
        <!-- 标题 -->
        <h2 class="title">登录您的账号</h2>
        <!-- 表单 -->
        <component :is="componentState[isComponent]"></component>
        <!-- 底部 -->
        <div class="footer">
          <el-divider content-position="center">
            <span class="divider-title">其他登录方式</span>
          </el-divider>

          <!-- 其他方式登陆 -->
          <div class="footer-btn-group">
            <el-button icon="" class="group-btn">
              <img :src="Phone" class="group-btn-img">
              手机号
            </el-button>
            <el-button class="group-btn">
              <img :src="Zfb" class="group-btn-img">
              支付宝
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <!-- 关闭窗口 -->
      <div class="close" @click="handlerClose">
        <el-icon>
          <CloseBold />
        </el-icon>
      </div>
      <img style="pointer-events: none;" src="@assets/images/banner.svg">
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CloseBold } from '@element-plus/icons-vue'
import PasswordFrom from './components/passwordFrom.vue'
import PhoneFrom from './components/phoneFrom.vue'
import Phone from '@assets/images/phone.svg'
import Zfb from '@assets/images/zfb.svg'
import { useMove } from '@hooks/useMove'



// 动态组件状态
const componentState = {
  PasswordFrom,
  PhoneFrom
}
const isComponent = ref('PasswordFrom')



const handlerClose = () => {
  window.electron.ipcRenderer.invoke('render-to-main', {
    name: "close-login"
  })
}

const { mousedown } = useMove("move-login")



</script>

<style scoped lang="scss">
.layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  box-sizing: border-box;
  user-select: none;
}

.left {
  box-sizing: border-box;
  max-width: 30%;
  min-width: 470px;
  background-color: var(--default-bg-color);
  padding: 0 10px;

  .header {
    height: 96px;
    width: 100%;
    display: flex;
    align-items: center;
    // 自身处于父元素开头

    img {
      width: 40px;
      height: 40px;
    }

    h1 {
      color: var(--default-color);
      font-size: 20px;
      font-weight: 700;
      margin-left: 7px;
    }
  }

  .content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    ::v-deep(.el-input__wrapper) {
      background-color: var(--hint-bg-color);
      font-size: 14px;
      font-weight: 400;
      padding-left: 16px;
      height: 56px;
      border-radius: 12px;
    }

    .title {
      color: var(--default-color);
      font-size: 30px;
      line-height: 40px;
      font-weight: 400;
      text-align: left;
      vertical-align: top;
      margin-bottom: 40px;
    }

    .footer {
      .divider-title {
        color: var(--hint-color);
        font-size: 16px;
      }

      .footer-btn-group {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;

        .group-btn {
          width: 217px;
          height: 56px;
          color: var(--default-color);
          border-radius: 12px;

          .group-btn-img {
            width: 24px;
            height: 24px;
            margin-right: 14px;
          }
        }
      }
    }
  }
}

.right {
  flex: 1;
  box-sizing: border-box;
  background-color: var(--primary-color);
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }

  .close {
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--default-bg-color);
    cursor: pointer;
  }

}
</style>
